<template>
  <div class="class_page">
    <van-search @search="search" v-model="inputVal" placeholder="请输入搜索关键词" />
    <div class="content">
      <van-sidebar v-model="active">
        <van-sidebar-item title="所有分类"/>
        <van-sidebar-item
          v-for="(item, index) in bigList"
          :key="index"
          :title="item.name"
        />
      </van-sidebar>
      <div class="right">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="../../assets/img/tangyan.jpeg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/yifei.jpeg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/yuanyuan.jpeg" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/img/jingtian.jpeg" alt="" />
          </van-swipe-item>
        </van-swipe>
        <van-grid :column-num="3">
          <van-grid-item
            v-for="(item,index) in showList"
            :key="index"
            :icon="item.icon"
            :text="item.name"
            @click="$router.push(`/classifyxq/${item.id}`)"
          />
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs,watch } from "vue";
import { getAll } from "../../api/home/index";
export default {
  components: {},
  setup() {
    const data = reactive({
      inputVal: "", // 搜索的值
      bigList: [], // 大类的数据
      smallList: [], // 所有的小类
      showList: [],// 展示的小类数据
      active: 0,
    });
    watch(() => data.active,(newVal)=>{
       if (newVal == 0){
         data.showList = data.smallList;
       } else {
         let id = data.bigList[newVal - 1].id;
        //  console.log(data.bigList);
         data.showList = data.smallList.filter(item => item.pid == id);
       }
    })
    // const cut = (val) => { // 切换的函数
    //   if (val == 'all'){
    //     data.showList = data.smallList;
    //   } else {
    //     data.showList = data.smallList.filter(item => item.pid == val);
    //   }
    // }
    getAll().then((res) => {
      data.bigList = res.data.filter((item) => item.level == 1);
      data.smallList = res.data.filter((item) => item.level == 2);
      data.showList = data.smallList;
    });
    const search = () => { // 搜索的函数
       data.showList = data.smallList.filter(item => item.name.includes(data.inputVal));
    }
    return {
      ...toRefs(data),
      search
      // cut
    };
  },
};
</script>
<style lang="scss" scoped>
.class_page {
  .content {
    height: calc(100% - 54px);
    display: flex;
    .van-sidebar {
      height: 100%;
      background: #f7f8fa;
    }
    .right {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      img {
        width: 100%;
        height: 187px;
      }
    }
  }
}
</style>